import React, { Component } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'

export default class List extends Component {
  // !#2 子组件调用父组件传递过来方法的同时并传参
  handleDel = (id) => {
    this.props.deleteItem(id)
  }
  render() {
    const { list, active } = this.props
    const copyList = [...list]
    /* if (active === 'hot') {
      // 根据热度，对 list 进行排序
      copyList.sort((a, b) => b.hot - a.hot)
    } else if (active === 'time') {
      // 根据时间，对 list 进行排序
      copyList.sort((a, b) => b.time - a.time)
    } */
    copyList.sort((a, b) => b[active] - a[active])

    return (
      <div className='comment-list'>
        {/* 留言列表 */}
        {copyList.map((item) => (
          <div className='list-item' key={item.id}>
            <div className='user-face'>
              <img className='user-head' src={item.img} alt='' />
            </div>
            <div className='comment'>
              <div className='user'>{item.author}</div>
              <p className='text'>{item.comment}</p>
              <div className='info'>
                <span className='time'>
                  {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                </span>
                {/* //!#2 子组件调用父组件传递过来方法的同时并传参 */}
                <span
                  className={classNames([
                    'like',
                    item.attitude === 1 ? 'liked' : '',
                  ])}
                  onClick={() =>
                    this.props.changeLike(item.id, item.attitude === 1 ? 0 : 1)
                  }
                >
                  <i className='icon'></i>
                </span>
                {/* hated 表示踩 */}
                <span
                  className={`hate ${item.attitude === -1 ? 'hated' : ''}`}
                  onClick={() =>
                    this.props.changeLike(
                      item.id,
                      item.attitude === -1 ? 0 : -1
                    )
                  }
                >
                  <i className='icon'></i>
                </span>
                <span
                  className='reply btn-hover'
                  onClick={() => this.handleDel(item.id)}
                >
                  删除
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
}
